<template>
    <div class="icon-window" @mouseleave="hidden">
        <div class="header">
            <el-input placeholder="请输入图标名称" v-model="keyword" @input="loadMenuIcons"/>
        </div>
        <div>
            <ul>
                <template v-for="(item) in $store.state.menuIcons">
                    <li @click="selectItem(item)" v-show="filterIcons(item)">
                        <img :src="`/${item.url}`" alt="">
                        <span>{{item.name}}</span>
                    </li>
                </template>
            </ul>
        </div>
    </div>
</template>

<script>
import {getMenuIcons} from "../network/sys/img";

export default {
    name: "MenuIconsBox",
    emits: ['select-item','hidden-box'],
    data(){
        return{
            keyword: null
        }
    },
    methods: {
        filterIcons(icon){
            if(this.keyword==null || this.keyword===''){
                return true;
            }
            return icon.name.indexOf(this.keyword) !== -1;
        },
        hidden(){
            this.$emit('hidden-box')
        },
        selectItem(item){
            this.$emit('select-item',item);
        },
        loadMenuIcons(){
            if(this.$store.state.menuIcons.length === 0){
                getMenuIcons(this.keyword).then(vo=>{
                    this.$store.commit('setMenuIcons',vo.data);
                })
            }
        },
        init(){
            this.loadMenuIcons();
        }
    },
    mounted() {
        // this.$refs.iconWindow.blur();
    },
    created() {
        this.init();
    }
}
</script>

<style scoped>
*{
    /*border: 1px solid lightgreen;*/
}
.icon-window{
    padding: 0 16px;
    background: white;
    border-radius: 4px;
    width: 600px;
    height: 215px;
    overflow-y: scroll;
    box-sizing: border-box;
    box-shadow: 0 0 6px 1px lightgrey;
}
.header{
    /*margin-bottom: 12px;*/
    background: white;
    padding: 10px;
    position: sticky;
    top: 0;
}
li {
    padding: 8px;
    /*border: 1px solid;*/
    width: 110px;
    height: 42px;
    cursor: pointer;
    box-sizing: border-box;
}
li img{
    width: 18px;
}
li span{
    font-size: 12px;
    padding-left: 6px;
    width: 70px;
    overflow: hidden;
    display: inline-block;
    white-space: nowrap;
    text-overflow: ellipsis;
}
li:hover{
    background: #f5f5f5;
}
</style>